<template>
  <!-- 日常维护-日常巡检 -->
  <div class="inspection">
    <!-- 实时数据统计 -->
    <realTime></realTime>
    <!-- 今日任务 -->
    <todayTask></todayTask>
      <!-- 历史数据统计 -->
      <historyData></historyData>
    <!-- 巡检计划按钮 -->
    <div class="plan_btn" @click="showVisible">
      <span>巡检计划</span>
    </div>
    <div class="Historical_task">
      <span>历史巡检任务>></span>
    </div>
    <div class="navBar">
      <span :class="navBarIndex == 0 ? 'nav_btn nav_btn_active' : 'nav_btn'" @click="changeNav(0)">设备间巡检</span>
      <span :class="navBarIndex == 1 ? 'nav_btn nav_btn_active' : 'nav_btn'" @click="changeNav(1)">公区巡检</span>
    </div>
    <inspectionPlanDialog :visible="visible" @closeDialog="closeDialog"></inspectionPlanDialog>
  </div>
</template>

<script setup lang="ts">
import realTime from "./components/realTime.vue"
import todayTask from "./components/todayTask.vue"
import historyData from "./components/historyData.vue"
import inspectionPlanDialog from './components/inspectionPlanDialog.vue';

let navBarIndex = ref(0);

const changeNav = (index:number)=>{
  if(navBarIndex.value!=index){
    navBarIndex.value=index;
  }
}
let visible = ref(false);//是否展示巡检计划弹窗

const showVisible = ()=>{
  visible.value = true;
}

const closeDialog = ()=>{
  visible.value = false;
}
</script>

<style lang="scss" scoped>
.inspection {
  z-index: 998;
  height: 100vh;
  position: relative;
  background: #08334e;

  .plan_btn {
    width: vh(85);
    height: vh(30);
    background: rgba(0, 227, 254, 0.2);
    border-radius: vh(4);
    border: 1px solid #00E3FE;
    position: absolute;
    left: vh(21);
    bottom: vh(67);
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(14);
    color: #FFFFFF;
    line-height: vh(30);
    text-align: center;
    cursor: pointer;
  }

  .Historical_task {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(14);
    color: #00D7FF;
    line-height: 1;
    position: absolute;
    bottom: vh(75);
    left: vh(340);
    cursor: pointer;
  }

  .navBar {
    position: absolute;
    bottom: vh(96);
    left: 50%;
    transform: translateX(-50%);

    .nav_btn {
      display: inline-block;
      width: vh(97);
      height: vh(30);
      background: rgba(0, 227, 254, 0.2);
      border-radius: vh(4);
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: vh(14);
      color: #FFFFFF;
      line-height: vh(30);
      text-align: center;
      cursor: pointer;
      &:first-child {
        margin-right: vh(21);
      }
      &.nav_btn_active {
        border: 1px solid #00E3FE;
        color: #00E3FE;
      }
    }
  }
}
</style>
